<script setup lang="ts" name="SvgIcon">
import { Icon } from '@iconify/vue'
import type { CSSProperties } from 'vue'

interface IconifyProps {
	name: string // 图标的名称 ==> 必传
	color?: string // 图标的颜色 ==> 非必传
	iconStyle?: CSSProperties // 图标的样式 ==> 非必传
	prefix?: string //前缀
	local?: boolean // 是否本地icon
}
const props = withDefaults(defineProps<IconifyProps>(), { prefix: 'icon', local: false })
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>

<template>
	<template v-if="props.local">
		<svg aria-hidden="true" style="width: 100%; height: 100%">
			<use :xlink:href="symbolId" :fill="props.color" />
		</svg>
	</template>
	<template v-else>
		<Icon :icon="props.name" :color="props.color" :style="props.iconStyle" />
	</template>
</template>

<style scoped>
.svg-icon {
	display: inline-block;
	overflow: hidden;
	vertical-align: -0.15em;
	fill: currentColor;
}
.svg-icon__infinite {
	animation: loadingCircle 1s infinite linear;
}
</style>
